<div>
  <p-growl [value]="msgs"></p-growl>
  <div>
    <p-carousel headerText="Cars" [value]="cars" [circular]="true" effectDuration="300ms">
      <ng-template let-car pTemplate="item">
        <div class="ui-grid ui-grid-responsive">
          <div class="ui-grid-row">
            <div class="ui-grid-col-12">
              <img src="assets/showcase/images/demo/car/{{car.brand}}.png" width="60">
            </div>
          </div>
          <div class="ui-grid-row">
            <div class="ui-grid-col-6 label">Vin: </div>
            <div class="ui-grid-col-6 content">{{car.vin}}</div>
          </div>
          <div class="ui-grid-row">
            <div class="ui-grid-col-6 label">Year: </div>
            <div class="ui-grid-col-6 content">{{car.year}}</div>
          </div>
          <div class="ui-grid-row">
            <div class="ui-grid-col-6 label">Color: </div>
            <div class="ui-grid-col-6 content">{{car.color}}</div>
          </div>
          <div class="ui-grid-row">
            <div class="ui-grid-col-12">
              <button type="button" pButton icon="fa-search" (click)="selectCar(car)"></button>
            </div>
          </div>
        </div>
      </ng-template>
    </p-carousel>
  </div>
</div>
